import { classPlangetPlanList, getClassInfo, getPlanList, PlangetPlanList ,delect} from '@/services'
import React, { useEffect, useState } from 'react'
import {NavLink} from 'umi'
import './planList.less'
import { Radio, Tabs, Input, Button } from 'antd';

const { TabPane } = Tabs;
const columns = [
    {
        title: '班级／计划',
        dataIndex: 'className',
    }, {
        title: '时间',
        dataIndex: 'surplusTime',
    }, {
        title: '进度',
        dataIndex: 'progress'
    }, {
        title: '操作',
        dataIndex: 'description'
    }
]
const time = +new Date()
const planList: React.FC = () => {
    const [date, setdate] = useState([])
    const [dataSource, setDateSource] = useState([])
    let [title, setTitle] = useState('')

    useEffect(() => {
        getClassInfo().then((res: { code: number; data: React.SetStateAction<never[]>; }) => {
            if (res.code === 200) {
                setdate(res.data)
                getPlanList({ classId: '', searchName: '', ifFinished: 1, pageNum: 1, pageSize: 10 }).then(res => {
                    if (res.code === 200) {
                        setDateSource(res.rows)
                    }
                })
            }
        })
    }, [])
    function out() {
        classPlangetPlanList({ classId: '', searchName: '', ifFinished: 2, pageNum: 1, pageSize: 10 }).then(res => {
            if (res.code === 200) {
                setDateSource(res.rows)
            }
        })
    }
    function action() {
        getPlanList({ classId: '', searchName: '', ifFinished: 1, pageNum: 1, pageSize: 10 }).then(res => {
            if (res.code === 200) {
                setDateSource(res.rows)
            }
        })
    }
    function started() {
        PlangetPlanList({ classId: '', searchName: '', ifFinished: 0, pageNum: 1, pageSize: 10 }).then(res => {
            if (res.code === 200) {
                setDateSource(res.rows)
            }
        })
    }
    function makdag(e: any) {
        if (e.keyCode === 13) {
            setDateSource(
                dataSource.filter((item: any) => {
                    return item.planname.includes(e.target.value)
                })
            )
        }
    }
    function befodelect(id:number){
        delect(id).then(res=>{
            if(res.code===200){
                alert(res.msg)
            }
        })
    }
    return <div className='teacher_pages'>
        <header className='breadcrumb_box'>
            <span className='el-breadcrumb__inner'>计划</span>
            <span className='el-breadcrumb__separator'>/</span>
            <span className='el-breadcrumb__item'>计划管理</span>
        </header>
        <div className="teacher_plan_list">
            <div className='train_resource'>
                <div className='r_t_title'>班级：</div>
                <div className='r_t_list'>
                    <Tabs type="card">
                        <TabPane tab="全部" key="1">
                        </TabPane>
                        <TabPane tab={
                            date.map((item: any) => {
                                return item.classname
                            })
                        } key="2">
                        </TabPane>
                    </Tabs>
                </div>
            </div>
            <div className='list_detail'>
                <Radio.Group defaultValue="a" size="large">
                    <Radio.Button value="b" onChange={e => { started() }}>未开始</Radio.Button>
                    <Radio.Button value="a" onChange={e => { action() }}>进行中</Radio.Button>
                    <Radio.Button value="c" onChange={e => { out() }}>已结束</Radio.Button>
                    <Button><NavLink to="/teachers/addPlan">+添加计划</NavLink></Button>
                    <Input placeholder="搜索计划／项目／任务" defaultValue='' onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                        makdag(e)
                    }}></Input>
                </Radio.Group>
            </div>
            <div className='title'>
                {
                    columns.map(item => {
                        return <span key={item.title} className={item.dataIndex}>{item.title}</span>
                    })
                }
            </div>
            <div className='list_cont'>
                {
                    dataSource.length==0?'暂无数据':dataSource && dataSource.map((item: any, index: number) => {
                        return <div className={index % 2 !== 0 ? 'list_active' : ''} key={item.id}>
                            <div>
                                <p>{item.className}</p>
                                <h1>{item.planname}</h1>
                            </div>
                            <div>
                                <h1>距结束还剩：{+new Date(item.endtime) < time ? '0时0分0秒' : item.surplusTime}</h1>
                                <p>开始：{item.begintime}</p>
                                <p>结束：{item.endtime}</p>
                            </div>
                            <div>
                                <h1 className='progress'>{item.progress + '%'}</h1>
                            </div>
                            <div>
                                <NavLink to='/teachers/viewPlan'>查看</NavLink>
                                <p onClick={()=>{{befodelect(item.id)}}}>删除</p>
                            </div>
                        </div>
                    })
                }
            </div>
        </div>
    </div>
}
export default planList
